<!-- 规则信息表单 -->
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="选择模板" prop="tem">
        <el-select
          v-model="ruleForm.tem"
          placeholder="请选择模板"
          style="width: 240px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script name="selectTemplateForm">
import { reactive, ref } from 'vue'

export default {
  setup() {
    const ruleFormRef = ref()
    const ruleForm = reactive({
      tem: ''
    })
    const rules = reactive({
      tem: [
        { required: true, message: '请选择模板', trigger: 'change' }
      ]
    })
    const options = [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      },
      {
        value: 'Option3',
        label: 'Option3'
      },
      {
        value: 'Option4',
        label: 'Option4'
      },
      {
        value: 'Option5',
        label: 'Option5'
      }
    ]
    return {
      ruleFormRef,
      ruleForm,
      rules,
      options
    }
  }
}
</script>
<style scoped lang="scss">
  .input {
    width: 300px;
  }
</style>

